@selector: pdfviewer;

@keyframes pdfviewer-rotate {
    to {
        transform: rotate(1turn);
    }
}

.@{selector}-wrapper * {
    box-sizing: inherit;
}

.isMobile {
    .zoom-dropdown {
        display: none !important;
    }

    .zoom-dropdown+.btn_zoom_in {
        margin-left: 5px;
    }
}

@media screen and (max-width: 820px) {

    .expand-sample-wrap,
    .sep,
    .screenfull-wrap {
        display: none !important;
    }
}

@media (any-hover: hover) {
    .@{selector}-hd-act {
        &:hover {
            background-color: var(--bg);
            color: var(--color);

            svg {
                color: inherit;
            }
        }
    }
}

.@{selector}-wrapper {
    --pdf-viewer-width: 100%;
    --pdf-viewer-height: 100%;
    --scale-factor: 1;
    --sample-width: 100px;
    --gap: 10px;
    --color: #1780ff;
    --border-color: #d7d7d7;
    --bg: #d4d4d7;
    --hd-bg: #F0F5F7;
    --hd-height: 32px;
    box-sizing: border-box;
    width: var(--pdf-viewer-width);
    height: var(--pdf-viewer-height);
    background-color: var(--bg);
    font-size: 14px;

    /* Only necessary in Google Chrome, see issue 14205, and most unfortunately
    * the problem doesn't show up in "text" reference tests. */
    /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
    svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
        font-size: inherit;
    }

    .@{selector}-hd {
        display: flex;
        align-items: stretch;
        // justify-content: space-between;
        padding: 0 10px;
        gap: 26px;
        height: var(--hd-height);
        background-color: var(--hd-bg);
        border-bottom: 1px solid var(--border-color);
        font-size: 13px;
        z-index: 10;
        white-space: nowrap;
    }

    .@{selector}-hd-item {
        display: inline-flex;
        align-items: center;
        gap: 10px;

        &.sep {
            margin-top: calc(calc(var(--hd-height) / 2) / 2);
            height: calc(var(--hd-height) / 2);
            border-left: 1px solid currentColor;
        }
    }

    .@{selector}-hd-act {
        display: flex;
        align-items: center;
        cursor: pointer;
        height: 100%;
        position: relative;

        svg {
            font-size: 18px;
            // color: #555;
        }

        &.active {
            color: var(--color);

            svg {
                color: inherit;
            }
        }
    }

    .zoom-dropdown {
        .txt_zoom_value-wrap {
            display: flex;
            align-items: center;
        }

        >ul {
            display: none;
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            top: 30px;
            left: -5px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
            border-radius: 3px;
            color: #333;
            z-index: 999;

            li {
                display: flex;
                align-items: center;
                height: 26px;
                padding: 0 20px;
                white-space: nowrap;
                border-radius: 3px;

                &:hover,
                &.active {
                    background-color: var(--bg);
                }
            }
        }

        &:hover {
            >ul {
                display: block;
            }
        }
    }

    .btn_screenfull {
        [data-off] {
            display: none;
        }

        &.is-screenfull {
            [data-on] {
                display: none;
            }

            [data-off] {
                display: block;
            }
        }
    }

    .btn_search {
        .search-popup {
            position: absolute;
            top: 30px;
            left: -5px;
            width: 300px;
            height: 100px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
            border-radius: 3px;
            color: #333;
            z-index: 999;
            padding: 10px;

            input {
                height: 32px;
                width: 200px;
                border: 1px solid #bbb;
            }
        }
    }

    .@{selector}-bd {
        width: 100%;
        height: calc(100% - 32px);
        // padding: 10px;
        display: flex;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
    }

    .@{selector}-bd-sample {
        --height: 80px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 180px;
        padding: var(--gap) calc(var(--gap) * 2);
        overflow: hidden auto;
        // background-color: rgba(255, 255, 255, .7);
        background-color: var(--bg);
        display: none;
        opacity: 0;
        transform: translateX(-50%);
        transition: transform .2s linear, opacity .2s linear;

        &.show {
            display: block;
        }

        &.animate {
            transform: translateX(0);
            opacity: 1;
        }

        .@{selector}-page {
            cursor: pointer;

            * {
                pointer-events: none;
            }

            &:active,
            &:hover {
                box-shadow: 0 0 5px 5px rgba(0, 0, 0, .3);
            }
        }
    }

    .@{selector}-bd-pages {
        --height: 100vh;
        width: 100%;
        height: 100%;
        padding: var(--gap) calc(var(--gap) * 2);
        overflow: auto;
        position: relative;
    }

    .@{selector}-pages-inner {
        // --w: calc(100% - var(--gap) * 4);
        width: 100%;
        height: auto;
        // margin: var(--gap) auto;
    }

    .@{selector}-page {
        margin: 0 auto var(--gap) auto;
        width: 100%;
        height: var(--height);
        position: relative;
        display: flex;
        justify-content: center;
        background-color: #fff;

        // &::after {
        //     content: "-"attr(data-page)"-";
        //     position: absolute;
        //     bottom: -12.5px;
        //     right: 10px;
        //     z-index: 10;
        //     font-size: 12px;
        //     color: rgba(0, 0, 0, 1);
        // }
        canvas {
            width: 100%;
            height: 100%;
        }
    }

    .loadingbar {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        // display: flex;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        font-size: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, .8);
        border-radius: 4px;
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
        z-index: 999;

        svg {
            font-size: 1.2em;
            margin-right: 4px;
            animation: pdfviewer-rotate 1s linear infinite;
        }
    }
}

.@{selector}-wrapper {

    // begin 文本层样式
    .textLayer {
        position: absolute;
        text-align: initial;
        inset: 0;
        overflow: hidden;
        opacity: 0.25;
        line-height: 1;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        text-size-adjust: none;
        forced-color-adjust: none;
        transform-origin: 0 0;
        z-index: 2;
    }

    .textLayer :is(span, br) {
        color: transparent;
        position: absolute;
        white-space: pre;
        cursor: text;
        transform-origin: 0% 0%;
    }

    /* Only necessary in Google Chrome, see issue 14205, and most unfortunately
     * the problem doesn't show up in "text" reference tests. */
    .textLayer span.markedContent {
        top: 0;
        height: 0;
    }

    .textLayer .highlight {
        margin: -1px;
        padding: 1px;
        background-color: var(--highlight-bg-color);
        border-radius: 4px;
    }

    .textLayer .highlight.appended {
        position: initial;
    }

    .textLayer .highlight.begin {
        border-radius: 4px 0 0 4px;
    }

    .textLayer .highlight.end {
        border-radius: 0 4px 4px 0;
    }

    .textLayer .highlight.middle {
        border-radius: 0;
    }

    .textLayer .highlight.selected {
        background-color: var(--highlight-selected-bg-color);
    }

    .textLayer ::-moz-selection {
        background: blue;
        background: AccentColor;
    }

    .textLayer ::selection {
        background: blue;
        background: AccentColor;
    }

    /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
    .textLayer br::-moz-selection {
        background: transparent;
    }

    .textLayer br::selection {
        background: transparent;
    }

    .textLayer .endOfContent {
        display: block;
        position: absolute;
        inset: 100% 0 0;
        z-index: -1;
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .textLayer .endOfContent.active {
        top: 0;
    }

    // end 文本层样式
}

.watermarkWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('https://oss.petslib.cn/prod/static/images/watermark/lgsy.png');
    background-position: left top;
    background-repeat: repeat;
    background-size: 200px 200px;
    z-index: 100;
    pointer-events: none;
    opacity: .3;
}

.isMobile {
    .watermarkWrapper {
        background-size: 100px 100px;
    }
}